<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>网络招聘会管理</h2>
        </template>
      </PageTitle>
      <el-row
        :gutter="10"
        type="flex"
        justify="space-between"
        style="margin-top: 20px"
      >
        <el-col :span="10">
          <el-row :gutter="10" type="flex">
            <el-select placeholder="不限添加时间">
              <el-option
                v-for="item in addTime"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row type="flex">
            <el-select placeholder="标题">
              <el-option
                v-for="item in titleOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-row type="flex">
              <el-input placeholder="请输入搜索内容"></el-input>
              <el-button type="primary">
                <i class="el-icon-search"></i>
              </el-button>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        v-loading="downloadLoading"
        ooltip-effect="dark"
        border
        :data="list"
        max-height="500px"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column
          label="标题"
          align="center"
          width="width"
          prop="title"
          fixed
        />
        <el-table-column
          label="举办时间"
          align="center"
          prop="full_name"
          fixed
        />
        <el-table-column
          label="预定状态"
          align="center"
          prop="phone"
          width="width"
          fixed
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.setmeal ? 'info' : 'success'">{{
              scope.row.setmeal ? "已结束" : "进行中"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="显示状态"
          align="center"
          prop="school"
          width="width"
        >
          <template>
            <el-switch
              v-model="model"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="添加日期" align="center" prop="addtime">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            {{ scope.row.addtime }}
          </template>
        </el-table-column>
        <el-table-column
          label="允许报名"
          align="center"
          prop="practice_sum"
          width="width"
        />
        <el-table-column
          label="参会企业/个人"
          align="center"
          prop="com_name"
          width="width"
        >
          <template slot-scope="scope">
            {{ scope.row.total_company }} / {{ scope.row.total_personal }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="prop"
          label="操作"
          width="330"
        >
          <template>
            <el-button type="primary" size="small" @click="enterprise"
              >参会企业</el-button
            >
            <el-button type="primary" size="small" @click="personEnterprise"
              >参会个人</el-button
            >
            <el-button type="primary" size="small" @click="editNetWorkJobFair"
              >修改</el-button
            >
            <el-button type="danger" size="small" @click="delBtn"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="8">
          <el-button type="primary" size="small" @click="addJobFair"
            >添加网络招聘会</el-button
          >
          <el-button type="danger" size="small">删除所宣布</el-button>
        </el-col>
        <el-col :span="16">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="255"
            style="text-align: right"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: true,
      list: [
        {
          display: true,
          id: 2,
          title: "测试测试测试",
          thumb_src: "https:\/\/qncdn.blwang.com\/2024-10-25-671b3cfeb349a.jpg",
          starttime: 1729699200,
          endtime: 1730304000,
          addtime: 1729838352,
          setmeal_id: "1,3,2,4,5",
          click: 37,
          score: 2,
          total_company: 0,
          total_personal: 3,
          jobfair_link: "http:\/\/hr.blwang.com\/jobfairol\/2.html",
          setmeal: 0,
        },
        {
          display: true,
          id: 1,
          title: "匠心筑梦才耀北仑｜北仑区春季大型人才招聘会",
          thumb_src: "https:\/\/qncdn.blwang.com\/2024-02-29-65e00b3e00eb7.jpg",
          starttime: 1709308800,
          endtime: 1709395200,
          addtime: 1708065768,
          setmeal_id: "2,3,4,1",
          click: 5853,
          score: 0,
          total_company: 153,
          total_personal: 14,
          jobfair_link: "http:\/\/hr.blwang.com\/jobfairol\/1.html",
          setmeal: 1,
          setmeal_cn:
            "优选企业,专精特新小巨人,大优强\/单项冠军\/新能源,基础会员",
        },
      ],
      addTime: [
        { id: 1, name: "不限添加时间" },
        { id: 2, name: "三天内" },
        { id: 3, name: "一周内" },
        { id: 4, name: "一月内" },
        { id: 5, name: "半年内" },
        { id: 6, name: "一年内" },
      ],
      adPlatform: [{ id: 1, name: "不限广告位" }],
      showStatus: [
        { id: 1, name: "不限显示状态" },
        { id: 2, name: "显示" },
        { id: 3, name: "隐藏" },
      ],
      becomeTime: [
        { id: 1, name: "不限到期时间" },
        { id: 2, name: "已到期" },
        { id: 3, name: "三天内" },
        { id: 4, name: "一周内" },
      ],
      titleOptions: [
        { id: 1, name: "标题" },
        { id: 2, name: "招聘会ID" },
      ],
      multipleSelection: [], // 多选数据
    };
  },
  methods: {
    addJobFair() {
      this.$router.push({
        name: "addNetWorkJobFair",
      });
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 统一的删除方法
    async handleDelete(id) {
      try {
        await this.$confirm('确认删除该招聘会?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        const res = await deleteJobFairApi(id);
        if (res.code === 1) {
          this.$message.success('删除成功');
          this.getList(); // 刷新列表
        } else {
          this.$message.error(res.msg || '删除失败');
        }
      } catch (error) {
        console.error('删除失败:', error);
        if (error !== 'cancel') {
          this.$message.error('删除失败');
        }
      }
    },
    // 删除单条数据
    async deleteRow(row) {
      await this.handleDelete(row.id);
    },
    // 批量删除
    async deleteSelected() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的数据');
        return;
      }

      try {
        await this.$confirm(`确认删除选中的 ${this.multipleSelection.length} 条数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        // 依次删除选中的数据
        const promises = this.multipleSelection.map(item => deleteJobFairApi(item.id));
        const results = await Promise.all(promises);

        // 检查所有删除操作是否成功
        const allSuccess = results.every(res => res.code === 1);
        if (allSuccess) {
          this.$message.success('批量删除成功');
          this.getList(); // 刷新列表
        } else {
          this.$message.error('部分数据删除失败');
        }
      } catch (error) {
        console.error('批量删除失败:', error);
        if (error !== 'cancel') {
          this.$message.error('批量删除失败');
        }
      }
    },
    // 编辑网络招聘会
    async editNetWorkJobFair() {
      try {
        // 直接调用获取详情的接口
        const res = await getJobFairDetailApi();
        if (res.code === 1) {
          // 存储详情数据到localStorage
          localStorage.setItem("editJobFair", JSON.stringify(res.data));
          // 跳转到编辑页面
          this.$router.push({
            name: "editNetWorkJobFair",
          });
        } else {
          this.$message.error(res.msg || "获取详情失败");
        }
      } catch (error) {
        console.error("获取详情失败:", error);
        this.$message.error("获取详情失败");
      }
    },
    // 参会企业
    enterprise() {
      this.$router.push({
        name: "enterprise",
      });
    },
    // 参会个人
    personEnterprise() {
      this.$router.push({
        name: "personEnterprise",
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
